<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    />
    <!-- <div v-if="meta.indexOf('BraceletDepositList') > -1" class="doumee_table_header">
      <el-button type="primary" @click="showPzbtn">{{ $t('message.yjpz') }}</el-button>
    </div> -->
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column
        align="center"
        :label="$t('message.shid')"
        prop="braceletId"
        min-width="130"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('message.memberInfo')"
        min-width="250"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.userName || "" }}
          {{ scope.row.phone ? "-" : "" }}
          {{ scope.row.phone || "" }}
          {{ scope.row.number ? "-" : "" }}
          {{ scope.row.number || "" }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.gllx')"
        min-width="100"
        prop="userType"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.userType === "0"
              ? $t("message.hy")
              : scope.row.userType === "1"
              ? $t("message.sk")
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.yjzffs')"
        prop="payMethod"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="realDeposit"
        :label="$t('message.zfyj')"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.thyj')"
        prop="tkDeposit"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="billBusinessId"
        :label="$t('message.pjph')"
        min-width="210"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.pjmc')"
        prop="billName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.bdsj')"
        prop="createTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.sendev')"
        prop="sendDevName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.jbsj')"
        prop="unbindTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.recydev')"
        prop="recycleDevName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.status')"
        min-width="100"
        fixed="right"
        prop="status"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.status == 0
              ? $t("message.yjb")
              : scope.row.status == 1
              ? $t("message.ybd")
              : scope.row.status == 2
              ? $t("message.bdsb")
              : scope.row.status == 3
              ? $t("message.shyitk")
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.caozuo')"
        min-width="170"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-if="
              scope.row.status == 1 && meta.indexOf('RefundBraceletOrder') > -1
            "
            v-preventReClick
            type="text"
            @click="jbBtn(scope.row)"
            >{{ $t("message.jieban") }}</el-button
          >
          <el-button
            v-if="
              scope.row.billOrderId &&
              scope.row.isRefund === '1' &&
              scope.row.status != 2
            "
            v-preventReClick
            type="text"
            @click="
              print(
                scope.row.billOrderId,
                'BRACELET_REFUND_TPML',
                scope.row.isRefund
              )
            "
            >{{ $t("message.dayin") }}</el-button
          >
          <el-button
            v-if="scope.row.billOrderId && scope.row.isRefund === '0'"
            v-preventReClick
            type="text"
            @click="
              print(scope.row.billOrderId, 'BRACELET_TPML', scope.row.isRefund)
            "
            >{{ $t("message.dayin") }}</el-button
          >
          <el-button
            v-if="scope.row.status == 2"
            v-preventReClick
            type="text"
            @click="bdWristStrap(scope.row.id)"
            >{{ $t("message.bd") }}</el-button
          >
          <el-button
            v-if="scope.row.status == 2 || scope.row.status == 3"
            v-preventReClick
            type="text"
            @click="jbBtn(scope.row, '100')"
            >{{ $t("message.tk1") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @SizeChange="pageSizeChange"
      @current-change="getList"
    />
    <Deposit ref="Deposit" @add="depositAdd" @edit="depositEdit" />
    <DepositEdit ref="DepositEdit" />
    <RechargeTem v-if="isPrint" ref="RechargeTemRef" />
    <Unbinding ref="Unbinding" @success="getList()" />
    <el-dialog
      :title="$t('message.bd')"
      @close="cancelBracelet1('ruleForm1')"
      :visible.sync="isShow"
      width="500px"
    >
      <el-form
        :model="ruleForm1"
        :rules="rules1"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item :label="translate('shxpid')" prop="braceletCode">
          <el-input
            v-model="ruleForm1.braceletCode"
            :placeholder="translate('qsr')"
            style="width: 80%"
            @input="handleInput"
            ref="braceletCodeInput"
          ></el-input>
        </el-form-item>
        <el-form-item :label="translate('shbh')" prop="braceletName">
          <el-input
            v-model="ruleForm1.braceletName"
            :placeholder="translate('qsr')"
            style="width: 80%"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-preventReClick @click="cancelBracelet1('ruleForm1')">{{
          $t("message.qx")
        }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          :loading="loadinga"
          @click="submit('ruleForm1')"
          >{{ $t("message.qr") }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBraceletOrderList,
  printOrder,
  getBraceletNumber,
  bindingBracelet,
} from "@/api";
import { parseTime } from "@/utils";
import Paginations from "@/components/paginations/paginations";
import QueryForm from "@/components/QueryForm";
import { queryFormConfig } from "./config";
import Deposit from "./components/deposit.vue";
import DepositEdit from "./components/depositEdit.vue";
import Unbinding from "./components/unbinding.vue";
import RechargeTem from "@/components/printTem/recharge.vue";
export default {
  name: "AssociationList",
  components: {
    QueryForm,
    Deposit,
    Unbinding,
    DepositEdit,
    Paginations,
    RechargeTem,
  },
  data() {
    return {
      queryFormConfig,
      meta: [],
      list: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10,
      },
      isPrint: false,
      listLoading: true,
      billOrderId: "",
      filters: {},
      ruleForm1: { braceletName: "" },
      rules1: {
        braceletCode: [
          { required: true, message: this.translate("qsr"), trigger: "blur" },
        ],
      },
      loadinga: false,
      isShow: false,
    };
  },
  created() {
    this.meta = this.$route.meta.buttons || [];
    this.getList(1);
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const {
            ruleForm1: { id, braceletCode },
          } = this;
          bindingBracelet({
            param: {
              braceletCode,
              id,
            },
          }).then((res) => {
            this.$message.success(this.translate("bdcg1"));
            this.cancelBracelet1("ruleForm1");
            this.getList(1);
          });
        }
      });
    },
    handleInput(value) {
      getBraceletNumber({
        param: {
          braceletCode: value,
        },
      }).then((res) => {
        this.ruleForm1.braceletName = res.record?.braceletName || "";
      });
    },
    bdWristStrap(id) {
      this.isShow = true;
      this.ruleForm1.id = id;
      this.$nextTick(() => {
        this.$refs.braceletCodeInput?.focus();
      });
    },
    cancelBracelet1(formName) {
      this.$refs[formName].resetFields();
      this.isShow = false;
      this.ruleForm1 = { braceletName: "" };
    },
    pageSizeChange(val) {
      this.pagination.rows = val;
      this.getList(1);
    },
    showPzbtn() {
      this.$refs.Deposit.getList(1);
    },
    depositAdd() {
      this.$refs.DepositEdit.show();
    },
    print(workId, templateCode, ddstatus) {
      if (window.Android) {
        Android.print(templateCode, workId, "");
        return;
      }
      this.isPrint = true;
      printOrder({
        param: {
          contentMap: {},
          venueId: sessionStorage.getItem("venueId"),
          workId,
          templateCode,
        },
      })
        .then((res) => {
          if (
            res.record &&
            res.record.isPrint === "1" &&
            res.record.dataList &&
            res.record.dataList.length > 0
          ) {
            res.record.dataList.forEach((item) => {
              this.$refs.RechargeTemRef.obj = { ...item, ddstatus };
              this.$refs.RechargeTemRef.desc = this.$t("message.shTemPlace");
              setTimeout(() => {
                this.$refs.RechargeTemRef.print();
              }, 300);
              setTimeout(() => {
                this.isPrint = false;
              }, 500);
            });
          } else {
            this.isPrint = false;
          }
        })
        .catch(() => {
          this.isPrint = false;
        });
    },
    depositEdit(e) {
      this.$refs.DepositEdit.show(e);
    },
    jbBtn(e, num = "") {
      this.billOrderId = e.billOrderId;
      var obj = {};
      for (var k in e) {
        obj[k] = e[k];
      }
      obj.billName = obj.billInfo;
      this.$refs.Unbinding.show(obj, num);
    },
    // 清空
    clear() {
      this.filters = {};
      this.getList(1);
    },
    getList(page) {
      const { filters, pagination } = this;
      if (page) {
        pagination.page = page;
        this.pagination.page = Number(page);
      }
      pagination.firstQueryTime = parseTime(new Date());
      if (filters.time) {
        filters.startTime = filters.time[0];
        filters.endTime = filters.time[1];
      } else {
        filters.startTime = "";
        filters.endTime = "";
      }
      this.listLoading = true;
      getBraceletOrderList({
        pagination,
        param: {
          ...filters,
          venueId: sessionStorage.getItem("venueId"),
        },
      })
        .then((res) => {
          this.listLoading = false;
          if (res.errorCode === "000000") {
            this.list = res.recordList;
            this.total = res.totalCount;
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
  },
};
</script>

<style lang='scss' scoped>
.vip-info {
  display: flex;
  justify-content: center;
  .name-phone {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    margin-left: 10px;
    flex: 1;
  }
}
::v-deep {
}
</style>
